body{
	overflow: hidden;
	position: relative;
}

.header{
	position: fixed;
	z-index: 20;
	top: 10px;
	left: 50%;
	margin-left: -600px;
}

#c{
	position: absolute;
	top: 0px;
	left: 0px;
}


.circle-box{
	position: absolute;
	width: 100%;
	min-width: 1200px;
	height: 700px;
	/*background: #eee;*/
	left: 0%;
	top: 10%;
	z-index: 15;
	/*border: 1px solid #999;*/
}
.circle-box div{
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: #f00;
	transition: all 1500ms;
	z-index: 15;
	background: -webkit-linear-gradient(45deg, #e25252, #e10f16); 
	background: -o-linear-gradient(45deg, #e25252, #e10f16); 
	background: -moz-linear-gradient(45deg, #e25252, #db1d1e); 
	background: linear-gradient(45deg, #e25252, #e10f16); 
}

.circle-box div:hover{
	/*transform: translate(10px, 10px);*/
}

.circle-box div:nth-child(1){
	left: 40px;
	top: 60px;
	transform: translate(40px, 60px);
}
.circle-box div:nth-child(1):hover{
	transform: translate(50px, 70px);
}
.circle-box div:nth-child(2){
	left: 400px;
	top: 350px;
}
.circle-box div:nth-child(2):hover{
	transform: translate(-19px, -24px);
}
.circle-box div:nth-child(3){
	left: 90px;
	top: 500px;
}
.circle-box div:nth-child(3):hover{
	transform: translate(10px, 15px);
}
.circle-box div:nth-child(4){
	right: 60px;
	bottom: 60px;
}
.circle-box div:nth-child(4):hover{
	transform: translate(25px, 15px);
}
.circle-box div:nth-child(5){
	right: 260px;
	bottom: 160px;
}
.circle-box div:nth-child(5):hover{
	transform: scale(1.15);
}
.circle-box div:nth-child(6){
	right: -60px;
	bottom: 560px;
	width: 150px;
	height: 150px;
}
.circle-box div:nth-child(6):hover{
	transform: scale(0.8);
}

/*上向左右晃动*/
.right-up{
	animation: rightUp 2s;
	animation-iteration-count:2;
}
@keyframes rightUp{
	0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(10px, -10px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.left-up{
	animation: leftUp 2s infinite;
}
@keyframes leftUp{
	0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(-10px, 10px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.right-down{
	animation: rightDown 2s infinite;
}
@keyframes rightDown{
	0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(10px, 10px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.left-down{
	animation: leftDown 2s infinite;
}
@keyframes leftDown{
	0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(-10px, -10px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}



/*自定义上升*/
.circle-box {
	position: absolute;
	/*使气泡背景充满整个屏幕；*/
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	/*如果元素内容超出给定的宽度和高度，overflow 属性可以确定是否显示滚动条等行为；*/
	overflow: hidden;
	/*background: linear-gradient(to bottom right, #50A3A2, #53E3A6);*/
}
.circle-box div {
	position: absolute;
	/*bottom 的设置是为了营造出气泡从页面底部冒出的效果；*/
	bottom: -160px;
	/*默认的气泡大小； */
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.15);
	list-style: none;
	/*使用自定义动画使气泡渐现、上升和翻滚*/
	animation: square 15s infinite;
	transition-timing-function: linear;
	/*加上border-radius后气泡变为圆形*/
	border-radius: 50%;
}

#li1 {
	left: 10%;
}
#li2 {
	left: 20%;
	width: 190px;
	height: 190px;
	animation-delay: 2s;
	animation-duration: 7s;
}
#li3 {
	left: 5%;
	width: 100px;
	height: 100px;
	animation-delay: 4s;
}
#li4 {
	left: 40%;
	width: 160px;
	height: 160px;
	animation-duration: 8s;
	background-color: rgba(255, 255, 255, 0.3);
}
#li5 {
	left: 70%;
}
#li6 {
	left: 80%;
	width: 120px;
	height: 120px;
	animation-delay: 3s;
	background-color: rgba(255, 255, 255, 0.2);
}
#li7 {
	left: 3%;
	width: 140px;
	height: 140px;
	animation-delay: 2s;
}
#li8 {
	left: 55%;
	width: 90px;
	height: 90px;
	animation-delay: 4s;
	animation-duration: 15s;
}
#li9 {
	left: 25%;
	width: 10px;
	height: 10px;
	animation-delay: 2s;
	animation-duration: 12s;
	background-color: rgba(255, 255, 255, 0.3);
}
#li10 {
	left: 85%;
	width: 160px;
	height: 160px;
	animation-delay: 5s;
}
/*自定义 square 动画；*/
@keyframes square {
	0% {
		opacity: 0.5;
		transform: translateY(0px) rotate(45deg);
	}
	25% {
		opacity: 0.75;
		transform: translateY(-400px) rotate(90deg)
	}
	50% {
		opacity: 1;
		transform: translateY(-600px) rotate(135deg);
	}
	100% {
		opacity: 0;
		transform: translateY(-1000px) rotate(180deg);
	}
}

